import React, { Component } from 'react';
import { Row, Col, Card, Popover, Button } from 'antd';
import Item from './FormItem';
import styles from './index.less';
import History from './History';
import { Uploader } from 'antd-pro-toolkit';
import MyIcon from '@/components/MyIcon';

import { connect } from 'dva';
@connect(({ order }) => ({ orderSource: order.orderSource }))
class ProblemItem extends Component {
  status = ['待处理', '处理中', '已解决'];

  componentDidMount() {
    this.queryOrderSource();
  }

  queryOrderSource = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'order/fetchOrderSource',
    });
  };

  render() {
    const { workOrder, orderSource, children, isWorkOrder = false, loading = false } = this.props;
    const isOrder = (workOrder.type === 'ORDER' || workOrder.type === 'HUIORDER');
    const blockStyle = { fontSize: '100px', position: 'absolute', right: '20px', top: 0 };
    let block = '';
    if (workOrder.isBlock) {
      block = workOrder.isBlock && <MyIcon type="iconoss---yinzhang-koujian" style={blockStyle} />;
    } else {
      block = workOrder.onceBlock ? (
        <MyIcon type="iconoss---yinzhang-yifanghang" style={blockStyle} />
      ) : (
        ''
      );
    }
    let source = isWorkOrder
      ? workOrder.stakeholderSource && orderSource.length
        ? orderSource.filter(item => item.code === workOrder.stakeholderSource)[0].name
        : workOrder.stakeholderSource
      : '';
    const header = (
      <div className={styles.header}>
        <div className={styles.headerTitle}>{workOrder.title}</div>
        <div className={styles.headerInfo}>
          <div className={styles.infoBox}>
            <span className={styles.infoLabel}>创建人</span>
            {workOrder.creatorName}
          </div>
          <div className={styles.infoBox}>
            <span className={styles.infoLabel}>创建时间</span>
            {workOrder.createTime}
          </div>
        </div>
      </div>
    );
    return (
      <Row gutter={16}>
        <Col span={17}>
          <Card
            bordered={false}
            title={header}
            style={{ marginBottom: 16 }}
            bodyStyle={{ paddingBottom: 48, position: 'relative' }}
            loading={loading}
            extra={block}
          >
            <div dangerouslySetInnerHTML={{ __html: workOrder.content }} />
            {workOrder.fileInfoList &&
              workOrder.fileInfoList.length !== 0 && (
                <div className={styles.file}>
                  <Popover
                    trigger="focus"
                    content={
                      <Uploader
                        isView={true}
                        width={300}
                        value={workOrder.fileInfoList}
                        type="list"
                      />
                    }
                  >
                    <button style={{ width: 30, height: 30, padding: 0, border: 0, outline: 0 }}>
                      <MyIcon
                        type="iconoss---gongdan-fujian"
                        style={{ fontSize: '30px', cursor: 'pointer' }}
                      />
                    </button>
                  </Popover>
                </div>
              )}
          </Card>
          {workOrder.transactionList &&
            workOrder.transactionList.length > 0 && (
              <Card
                loading={loading}
                bordered={false}
                headStyle={{ borderBottom: 0 }}
                title="历史记录"
                style={{ marginBottom: 16 }}
              >
                {workOrder.transactionList.map(item => (
                  <History history={item} isWorkOrder={isWorkOrder} />
                ))}
              </Card>
            )}
          {children}
        </Col>
        <Col span={7}>
          <Card bordered={false} style={{ marginBottom: 16 }} loading={loading}>
            <div className={styles.cardHead}>基本信息</div>
            <div className={styles.baseInfo}>
              {isWorkOrder ? (
                <>
                  <Item label="工&ensp;单&ensp;号">{workOrder.code}</Item>
                  <Item label="类&emsp;&emsp;型">{workOrder.typeName}</Item>
                  {workOrder.orderSubTypeName && (
                    <Item label="子&ensp;类&ensp;型">{workOrder.orderSubTypeName}</Item>
                  )}
                  {isOrder && <Item label="订&ensp;单&ensp;号">{workOrder.waybillNo}</Item>}
                  <Item label="工单来源">{source}</Item>
                  <Item label="干&ensp;系&ensp;人">{workOrder.stakeholderName}</Item>
                  <Item label="状&emsp;&emsp;态">{this.status[workOrder.status]}</Item>
                  <Item label="用&ensp;户&ensp;组">{workOrder.transactorOrgName}</Item>
                  <Item label="处&ensp;理&ensp;人">{workOrder.transactorName}</Item>
                  <Item label="优&ensp;先&ensp;级">{workOrder.priorityName}</Item>
                </>
              ) : (
                <>
                  <Item label="类&emsp;&emsp;型">{workOrder.typeName}</Item>
                  <Item label="处&ensp;理&ensp;人">{workOrder.transactorName}</Item>
                </>
              )}
            </div>
          </Card>
        </Col>
      </Row>
    );
  }
}
export default ProblemItem;
